<script setup>
import { ref } from 'vue'
const visableDrawer = ref(false)
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import { AddDriverService, EditDriverService, GetDriverDetailService } from '@/api/Driver'

import { GetSchedulesService, GetSchedulesDetailService } from '@/api/schedules'
import { ElMessage } from 'element-plus'

const selectScheduless = ref([])
const selectedIds = ref([])

const scheduless = ref([])

// 默认数据
const defaultForm = {
  driverName: '',
  id: '',
  birthday: '',
  address: '',
  cell: '',
  startTime: '',
  endTime: '',
  schedules: []
}

//表单校验规则
const rules = {
  driverName: [
    { required: true, message: '请输入司机名称', trigger: 'blur' },
    {
      pattern: /^\S{1,10}$/,
      message: '司机名称名必须是1-4位的非空字符',
      trigger: 'blur'
    }
  ],
  birthday: [{ required: true, message: '请输入司机生日', trigger: 'blur' }],
  address: [{ required: true, message: '请输入司机家庭住址', trigger: 'blur' }],
  cell: [{ required: true, message: '请输入司机联系方式', trigger: 'blur' }],
  startTime: [{ required: true, message: '请输入一个工作开始时间', trigger: 'blur' }],
  endTime: [{ required: true, message: '请输入一个工作结束时间', trigger: 'blur' }]
}

// 准备数据
const formModel = ref({ ...defaultForm })

const open = async (row) => {
  visableDrawer.value = true
  console.log(row.id)
  if (row.id) {
    //需要基于row.id发送请求，获取编辑对应的详情数据，进行回显
    const res = await GetDriverDetailService(row.id)
    const ress = await GetSchedulesService()
    scheduless.value = ress.data.data
    formModel.value = res.data.data
  } else {
    const ress = await GetSchedulesService()
    scheduless.value = ress.data.data
    console.log(ress)
    formModel.value = { ...defaultForm } //基于默认的数据，重置form数据
  }
  console.log(row)
}
const formRef = ref()

const onSubmit = async () => {
  await formRef.value.validate()
  const isEdit = formModel.value.id
  if (isEdit) {
    for (var i = 0; i < selectedIds.value.length; i++) {
      const ss = await GetSchedulesDetailService(selectedIds.value[i])
      selectScheduless.value.push(ss.data.data)
    }
    formModel.value.schedules = selectScheduless.value
    // 将 selectScheduless 的值重置为空数组
    selectScheduless.value = []
    // 将 selectedIds 的值重置为空数组
    selectedIds.value = []
    await EditDriverService(formModel.value)
    ElMessage.success('修改成功')
    visableDrawer.value = false
    emit('success', 'edit')
  } else {
    delete formModel.value.id
    for (var i = 0; i < selectedIds.value.length; i++) {
      const ss = await GetSchedulesDetailService(selectedIds.value[i])
      selectScheduless.value.push(ss.data.data)
    }
    formModel.value.schedules = selectScheduless.value
    // 将 selectScheduless 的值重置为空数组
    selectScheduless.value = []
    // 将 selectedIds 的值重置为空数组
    selectedIds.value = []
    await AddDriverService(formModel.value)
    ElMessage.success('添加成功')
    visableDrawer.value = false
    //通知到父组件，添加成功了
    emit('success', 'add')
  }
}

const emit = defineEmits(['success'])

defineExpose({
  open
})
</script>

<template>
  <el-drawer v-model="visableDrawer" title="添加司机" size="40%">
    <el-form ref="formRef" :model="formModel" :rules="rules" abel-width="100px">
      <el-form-item label="司机名称">
        <el-input placeholder="请输入司机名称" v-model="formModel.driverName"></el-input>
      </el-form-item>
      <el-form-item label="生日">
        <el-date-picker
          v-model="formModel.birthday"
          type="date"
          placeholder="请选择司机生日"
          size="default"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item label="家庭住址">
        <el-input placeholder="请输入司机家庭住址" v-model="formModel.address"></el-input>
      </el-form-item>
      <el-form-item label="联系方式">
        <el-input placeholder="请输入司机联系方式" v-model="formModel.cell"></el-input>
      </el-form-item>
      <el-form-item>
        <!-- <template> -->
        <el-select
          v-model="selectedIds"
          placeholder="请选择工作时间段"
          multiple
          style="width: 240px"
        >
          <el-option
            v-for="item in scheduless"
            :key="item.id"
            :label="item.start_time + '-' + item.end_time"
            :value="item.id"
          />
        </el-select>
        <!-- </template> -->
      </el-form-item>
      <el-form-item>
        <el-button @click="onSubmit()" type="primary">提交</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<style lang="scss" scoped>
.avatar-uploader {
  :deep() {
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }
    .el-upload:hover {
      border-color: var(--el-color-primary);
    }
    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
  }
}

.editor {
  width: 100%;
  :deep(.ql-editor) {
    min-height: 200px;
  }
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
